/**
 * 仓库主文件
 */

// 引入 配置仓库的 函数
import { configureStore } from "@reduxjs/toolkit";

import { TypedUseSelectorHook, useSelector, useDispatch } from "react-redux";

// 引入切片文件, 默认引入的就是一个 reducer 函数
import countReducer from "./stores/count";
import todosReducer from "./stores/todos";
import cartReducer from "./stores/cart";

// 调用 configureStore, 并配置好 reducer 选项，返回的就是一个 store 对象
const store = configureStore({
  // 该 reducer 配置，类似于 combineReducers 的写法
  reducer: {
    // 顶层 state 的数据格式
    count: countReducer,
    todos: todosReducer,
    cart: cartReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;

/**
 * 自己定义一个 hook, 该 hook 中调用别人的 hook
 */
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch: () => AppDispatch = useDispatch;

// 导出 store
export default store;
